<p-panel>
  <p-header>
    Property Edit
  </p-header>

  <div class="ui-g ui-fluid">
    <div class="ui-g-6 ui-sm-12">

      <div class="ui-g-12">
        <h5>{{selectedPropertyList.name}}</h5>
        <small>{{getFullAddress(selectedPropertyList)}}</small>
      </div>

      <div class="ui-g-12">
        <label style="width: 100px">Project</label>
        <p-dropdown [autoWidth]="false" [options]="propertylistsOptions" [(ngModel)]="selectedPropertyList" filter="true"> </p-dropdown>
      </div>
      <div class="ui-g-12">
        <label style="width: 100px">Owner</label>
        <p-dropdown [autoWidth]="false" [options]="ownersOptions" [(ngModel)]="selectedOwner" filter="true"></p-dropdown>
      </div>
      <div class="ui-g-12">
        <label style="width: 100px">Agent</label>
        <p-dropdown [autoWidth]="false" [options]="agentsOptions" [(ngModel)]="selectedAgent" filter="true"></p-dropdown>
      </div>
      <div class="ui-g-12">
        <label style="width: 100px">Solicitor</label>
        <p-dropdown [autoWidth]="false" [options]="solicitorsOptions" [(ngModel)]="selectedSolicitor" filter="true"></p-dropdown>
      </div>
      <button pButton (click)="onSave()" icon="fa fa-floppy-o" label="SAVE"></button>
    </div>

    <div class="ui-g-6 ui-sm-12">
        <carousel>
          <slide *ngFor="let image of getPictures()">
            <img [src]="image.filePath" alt="" style="display: block; width: 100%;">
          </slide>
        </carousel>
        <div class="ui-g-12">
          <div *ngFor="let attachment of property['property_main_image']">
            <p-button (onClick)="deleteFile(attachment)" icon="fa fa-trash" iconPos="left" styleClass="ui-button-danger"></p-button>
            <a [href]="attachment.filePath" target="_blank" download>
              <small>{{attachment.originalFilename}}</small>
            </a>
          </div>
          <p-fileUpload #fileUploaderPictures (uploadHandler)="fileUpload('property_main_image',fileUploaderPictures,property)" customUpload="true"
            [withCredentials]="true" multiple="multiple"></p-fileUpload>
        </div>
      </div>

    <div class="ui-g-6">
      <div class="pd-20">
        <span class="md-inputfield ui-float-label">
          <input type="text" pInputText [(ngModel)]="property.lot">
          <label>Lot#</label>
        </span>
      </div>
    </div>
    <div class="ui-g-6">
      <div class="pd-20">
        <span class="md-inputfield ui-float-label">
          <input type="text" pInputText [(ngModel)]="property.internalSize">
          <label>Internal Size</label>
        </span>
      </div>
    </div>
    <div class="ui-g-6">
      <div class="pd-20">
        <span class="md-inputfield ui-float-label">
          <input type="text" pInputText [(ngModel)]="property.externalSize">
          <label>External Size</label>
        </span>
      </div>
    </div>
    <div class="ui-g-6">
      <div class="pd-20">
        <span class="md-inputfield ui-float-label">
          <input type="text" pInputText [(ngModel)]="property.price">
          <label>Price</label>
        </span>
      </div>
    </div>
    <div class="ui-g-6">
      <div class="pd-20">
        <span class="md-inputfield ui-float-label">
          <input type="text" pInputText [(ngModel)]="property.notes">
          <label>Notes</label>
        </span>
      </div>
    </div>
    <div class="ui-g-6">
      <div class="pd-20">
        <span class="md-inputfield ui-float-label">
          <p-dropdown [autoWidth]="false" [options]="aspectOptions" [(ngModel)]="property.aspect" filter="true"></p-dropdown>
          <label>Aspect</label>
        </span>
      </div>
    </div>

    <div class="ui-g-12">
      <div class="ui-g-2">Lot Type</div>
      <div class="ui-g-1 text-right">
        <i class="fa fa-bed" aria-hidden="true"></i>
      </div>
      <div class="ui-g-1" >
        <p-spinner size="5" [(ngModel)]="property.bedroomCount" [min]="0" [max]="100"></p-spinner>
      </div>
      <div class="ui-g-1 text-right">
        <i class="fa fa-bath" aria-hidden="true"></i>
      </div>
      <div class="ui-g-1 text-right">
        <p-spinner size="5" [(ngModel)]="property.bathRoomCount" [min]="0" [max]="100"></p-spinner>
      </div>
      <div class="ui-g-1 text-right">
        <i class="fa fa-car" aria-hidden="true"></i>
      </div>
      <div class="ui-g-1">
        <p-spinner size="5" [(ngModel)]="property.parkingCount" [min]="0" [max]="100"></p-spinner>
      </div>
      <div class="ui-g-1 text-right">
        <i class="fa fa-book" aria-hidden="true"></i>
      </div>
      <div class="ui-g-1">
        <p-spinner size="5" [(ngModel)]="property.studyCount" [min]="0" [max]="100"></p-spinner>
      </div>
      <div class="ui-g-1 text-right">
        <i class="fa fa-archive" aria-hidden="true"></i>
      </div>
      <div class="ui-g-1">
        <p-spinner size="5" [(ngModel)]="property.storageCount" [min]="0" [max]="100"></p-spinner>
      </div>

    </div>

    <div class="ui-g-12">
      <div class="ui-g-12">
          <label style="padding-right: 50px">Property Type</label>
      </div>
      <div class="ui-g-6">
          <p-radioButton name="groupPropertyType" [value]="PropertyType.SALE" label="Sale" [(ngModel)]="property.type"></p-radioButton>
      </div>
      <div class="ui-g-6">
          <p-radioButton name="groupPropertyType" [value]="PropertyType.RENT" label="Rent" [(ngModel)]="property.type"></p-radioButton>
      </div>
      
      
    </div>
    <hr>
    <div class="ui-g-12" *ngIf="property.type===PropertyType.SALE">

      <div class="ui-g-6">
        <span class="md-inputfield ui-float-label">
          <input type="text" pInputText [(ngModel)]="property.sale_note" disabled>
          <label>Sale Notes</label>
        </span>
      </div>

      <div class="ui-g-6">
        <span class="ui-float-label">
          <p-calendar [(ngModel)]="purchaseDate" [showIcon]="true"></p-calendar>
          <label>Purchase Date</label>
        </span>
      </div>

      <div class="ui-g-6">
        <span class="md-inputfield ui-float-label">
          <input type="text" pInputText [(ngModel)]="property.sellingPrice">
          <label>Sold Price</label>
        </span>
      </div>

      <div class="ui-g-6">
        <span class="md-inputfield ui-float-label">
          <input type="text" pInputText [(ngModel)]="property.total_commission_sale">
          <label>Total Commission</label>
        </span>
      </div>
      <div class="ui-g-6">
        <span class="md-inputfield ui-float-label">
          <input type="text" pInputText [(ngModel)]="property.current_commission_sale">
          <label>Current Commission</label>
        </span>
      </div>
      <div class="ui-g-6">
        <span class="md-inputfield ui-float-label">
          <input type="text" pInputText [(ngModel)]="property.ipan_total_commission_sale">
          <label>iPAN Total Commission</label>
        </span>
      </div>
      <div class="ui-g-6">
        <span class="md-inputfield ui-float-label">
          <input type="text" pInputText [(ngModel)]="property.ipan_current_commission_sale">
          <label>iPAN Current Commission</label>
        </span>
      </div>
      <div class="ui-g-6">
        <span class="md-inputfield ui-float-label">
          <input type="text" pInputText [(ngModel)]="property.my_referral_paid">
          <label>My Referral Paid</label>
        </span>
      </div>


      <div class="ui-g-12">
        <div class="ui-g-12">Sale Status</div>
        <div class="ui-g-6">
          <p-radioButton name="groupSaleStatus" (onClick)="saleStatusChange(PropertySaleStatus.FOR_SALE)" [value]="PropertySaleStatus.FOR_SALE" label="For Sale" [(ngModel)]="property.sale_status"></p-radioButton>
        </div>
        <div class="ui-g-6">
          <p-radioButton name="groupSaleStatus" (onClick)="saleStatusChange(PropertySaleStatus.DEPOSIT_TAKEN)" [value]="PropertySaleStatus.DEPOSIT_TAKEN" label="Deposit Taken" [(ngModel)]="property.sale_status"></p-radioButton>
        </div>
        <div class="ui-g-6">
          <p-radioButton name="groupSaleStatus" (onClick)="saleStatusChange(PropertySaleStatus.CONTRACT_EXCHANGED)" [value]="PropertySaleStatus.CONTRACT_EXCHANGED" label="Contract Exchanged" [(ngModel)]="property.sale_status"></p-radioButton>
        </div>
        <div class="ui-g-6">
          <p-radioButton name="groupSaleStatus" (onClick)="saleStatusChange(PropertySaleStatus.SETTLED)" [value]="PropertySaleStatus.SETTLED" label="Settled" [(ngModel)]="property.sale_status"></p-radioButton>
        </div>
      </div>

      <div class="ui-g-12">
        Attachment
        <div *ngFor="let attachment of property['property_bank_card_picture']">
          <p-button (onClick)="deleteFile(attachment)" icon="fa fa-trash" iconPos="left" styleClass="ui-button-danger"></p-button>
          <a [href]="attachment.filePath" target="_blank" download>{{attachment.originalFilename}}</a>
        </div>
      </div>

    </div>
    <!-- rent -->
    <div class="ui-g-12" *ngIf="property.type===PropertyType.RENT">
      <div class="card">
        <div class="ui-g-6">
          <span class="md-inputfield ui-float-label">
            <input type="text" pInputText [(ngModel)]="property.weeklyRent">
            <label>Weekly Rent</label>
          </span>
        </div>

        <div class="ui-g-6">
          <span class="ui-float-label">
            <p-calendar [(ngModel)]="commenceDate" [showIcon]="true"></p-calendar>
            <label>Commence Date</label>
          </span>
        </div>

        <div class="ui-g-6">
          <span class="md-inputfield ui-float-label">
            <input type="text" pInputText [(ngModel)]="property.term_of_lease">
            <label>Term of Lease</label>
          </span>
        </div>

        <div class="ui-g-6">
          <span class="md-inputfield ui-float-label">
            <input type="text" pInputText [(ngModel)]="property.commission_rent">
            <label>Rent Commission</label>
          </span>
        </div>
      </div>
    </div>


    <div class="ui-g-12 alert alert-info text-center"  role="alert">
        Resources
    </div>
    <div class="ui-g-12">
      <!-- contract of sale -->
      <h6>Contract Of Sale</h6>
      <div class="ui-g-12">
          <div class="ui-g-6">
              <p-editor [(ngModel)]="property.textContractOfSale" [style]="{'height':'320px'}"></p-editor>
            </div>
          <div class="ui-g-6">
            <div class="ui-g-12">
                <div *ngFor="let attachment of property.property_cos_document">
                  <p-button (onClick)="deleteFile(attachment)" icon="fa fa-trash" iconPos="left" styleClass="ui-button-danger"></p-button>
                  <a [href]="attachment.filePath" target="_blank" download>{{attachment.originalFilename}} </a>- {{attachment.fileSize/1024 | number:'1.1-2'}} KB - {{attachment.createTime | date:'short'}}
                </div>
              </div>
        
              <div class="ui-g-12">
                <p-fileUpload #fileCosUploader (uploadHandler)="fileUpload('property_cos_document', fileCosUploader, property)" customUpload="true"
                  [withCredentials]="true" multiple="multiple" ></p-fileUpload>
              </div>
          </div>
      </div>
  
    

  

      <!-- deposit form -->
      <h6>Deposit Form</h6>
      <div class="ui-g-12">
          <div class="ui-g-6">
              <p-editor [(ngModel)]="property.textDepositForm" [style]="{'height':'320px'}"></p-editor>
            </div>
          <div class="ui-g-6">
             
            <div class="ui-g-12">
                <div *ngFor="let attachment of property.property_deposit_form_document">
                  <p-button (onClick)="deleteFile(attachment)" icon="fa fa-trash" iconPos="left" styleClass="ui-button-danger"></p-button>
                  <a [href]="attachment.filePath" target="_blank" download>{{attachment.originalFilename}}</a> - {{attachment.fileSize/1024 | number:'1.1-2'}} KB - {{attachment.createTime | date:'short'}}
                </div>
              </div>
        
              <div class="ui-g-12">
                <p-fileUpload #fileDepositFormUploader (uploadHandler)="fileUpload('property_deposit_form_document', fileDepositFormUploader, property)"
                  customUpload="true" [withCredentials]="true" multiple="multiple"></p-fileUpload>
              </div>
          </div>
         
      </div>
   

      
      <!-- Billls & Charges -->
      <h6>Bills & Charges</h6>
      <div class="ui-g-12">
          <div class="ui-g-6">
              <p-editor [(ngModel)]="property.textBillsCharges" [style]="{'height':'320px'}"></p-editor>
            </div>
          <div class="ui-g-6">
              
            <div class="ui-g-12">
                <div *ngFor="let attachment of property.property_bill_charges">
                  <p-button (onClick)="deleteFile(attachment)" icon="fa fa-trash" iconPos="left" styleClass="ui-button-danger"></p-button>
                  <a [href]="attachment.filePath" target="_blank" download>{{attachment.originalFilename}}</a> - {{attachment.fileSize/1024 | number:'1.1-2'}} KB - {{attachment.createTime | date:'short'}}
                </div>
              </div>
              <div class="ui-g-12">
                <p-fileUpload #fileBillUploader (uploadHandler)="fileUpload('property_bill_charges', fileBillUploader, property)" customUpload="true"
                  [withCredentials]="true" multiple="multiple"></p-fileUpload>
              </div>
          </div>
      </div>
 
     
  

      <!-- management agreement -->
      <h6>Management Agreement</h6>
      <div class="ui-g-12">
          <div class="ui-g-6">
              <p-editor [(ngModel)]="property.textManagementAgreement" [style]="{'height':'320px'}"></p-editor>
            </div>
          <div class="ui-g-6">
              
            <div class="ui-g-12">
                <div *ngFor="let attachment of property.property_management_agreement_document">
                  <p-button (onClick)="deleteFile(attachment)" icon="fa fa-trash" iconPos="left" styleClass="ui-button-danger"></p-button>
                  <a [href]="attachment.filePath" target="_blank" download>{{attachment.originalFilename}}</a> - {{attachment.fileSize/1024 | number:'1.1-2'}} KB - {{attachment.createTime | date:'short'}}
                </div>
              </div>
              <div class="ui-g-12">
                <p-fileUpload #fileManagementUploader (uploadHandler)="fileUpload('property_management_agreement_document', fileManagementUploader, property)"
                  customUpload="true" [withCredentials]="true" multiple="multiple"></p-fileUpload>
              </div>
          </div>
      </div>
 
    


      <!-- solictor -->
      <h6>Solicitor</h6>
      <div class="ui-g-12">
          <div class="ui-g-6">
              <p-editor [(ngModel)]="property.textSolicitor" [style]="{'height':'320px'}"></p-editor>
            </div>
      </div>
     

    </div>

  </div>

  <p-footer>
    <p-button label="Save" (onClick)="onSave()" icon="fa fa-floppy-o" iconPos="left" styleClass="ui-button-primary"></p-button>
  </p-footer>
</p-panel>

<p-growl [(value)]="msgs"></p-growl>